import React, { memo, useCallback } from 'react';
import { Button, WhiteSpace } from 'antd-mobile';
import { history } from 'umi';
const defaultImg = require('@/assets/404.jpg');

import './index.less';

const NotFound = () => {
  const handleClick = useCallback(val => {
    if (val === 'home') {
      history.push('/');
    } else if (val === 'back') {
      history.go(-1);
    }
  }, []);

  return (
    <div className="notFound-page-wrap">
      <div className="img">
        <img src={defaultImg} alt="notfound" />
      </div>
      <WhiteSpace />
      <div className="btns">
        <Button
          type="primary"
          className="btn"
          onClick={() => handleClick('home')}
        >
          返回首页
        </Button>
        <WhiteSpace />
        <Button className="btn" onClick={() => handleClick('back')}>
          返回上一级
        </Button>
      </div>
    </div>
  );
};

export default memo(NotFound);
